<style lang="less">
    .bookkeeping-list {
        .ivu-table-wrapper {
            border: 0
        }
        .bookkeeping-footer {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 9;
            padding: 16px 8px 20px;
            background: #fff;
            ul {
                display: flex;
                li {
                    margin: 20px 50px 0;
                    align-items: center;

                }
            }
        }
        .ivu-table:after, .ivu-table:before {
            display: none
        }
        .ivu-table th {
            background: #fff;
            border-bottom-width: 2px;
            font-weight: bold
        }
    }
</style>
<template>
    <div class="bookkeeping-list">
        <Table :context="self" :data="tableData1" :columns="tableColumns1"  :height="height"
               ref="datatable"></Table>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="100" :current="1" @on-change="changePage"></Page>
            </div>
        </div>
        <div class="bookkeeping-footer">
            <ul>
                <li><span class="c-666">筛选后总支出</span>
                    <div class="bookkeeping-amount c-green">-4,597.00</div>
                </li>
                <li><span class="c-666">筛选后总收入</span>
                    <div class="bookkeeping-amount c-red">+1,666.00</div>
                </li>
                <li><span class="c-666">筛选后结余 </span>
                    <div class="bookkeeping-amount  c-green">
                        -2,931.00
                    </div>
                </li>
                <li><span class="c-666">流水记录数</span>
                    <div class="bookkeeping-amount">10</div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                self: this,
                height: 100,
                tableData1: this.mockTableData1(),
                tableColumns1: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render (row) {
                            const color = row.status == 1 ? 'blue' : row.status == 2 ? 'green' : 'red';
                            const text = row.status == 1 ? '构建中' : row.status == 2 ? '构建完成' : '构建失败';
                            return `<tag type="dot" color="${color}">${text}</tag>`;
                        }
                    },
                    {
                        title: '画像内容',
                        key: 'portrayal',
                        render (row, column, index) {
                            return `<Poptip trigger="hover" title="${row.portrayal.length}个画像" placement="bottom">
                                        <tag>${row.portrayal.length}</tag>
                                        <div slot="content">
                                            <ul><li v-for="item in tableData1[${index}].portrayal" style="text-align: center;padding: 4px">{{ item }}</li></ul>
                                        </div>
                                    </Poptip>`;
                        }
                    },
                    {
                        title: '选定人群数',
                        key: 'people',
                        render (row, column, index) {
                            return `<Poptip trigger="hover" title="${row.people.length}个客群" placement="bottom">
                                        <tag>${row.people.length}</tag>
                                        <div slot="content">
                                            <ul><li v-for="item in tableData1[${index}].people" style="text-align: center;padding: 4px">{{ item.n }}：{{ item.c }}人</li></ul>
                                        </div>
                                    </Poptip>`;
                        }
                    },
                    {
                        title: '取样时段',
                        key: 'time',
                        render (row) {
                            return `近${row.time}天`
                        }
                    },
                    {
                        title: '更新时间',
                        key: 'update',
                        render (row, column, index) {
                            return `{{ formatDate(tableData1[${index}].update) }}`;
                        }
                    }
                ]
            }
        },
        methods: {
            mockTableData1 () {
                let data = [];
                for (let i = 0; i < 10; i++) {
                    data.push({
                        name: '商圈' + Math.floor(Math.random() * 100 + 1),
                        status: Math.floor(Math.random() * 3 + 1),
                        portrayal: ['城市渗透', '人群迁移', '消费指数', '生活指数', '娱乐指数'],
                        people: [
                            {
                                n: '客群' + Math.floor(Math.random() * 100 + 1),
                                c: Math.floor(Math.random() * 1000000 + 100000)
                            },
                            {
                                n: '客群' + Math.floor(Math.random() * 100 + 1),
                                c: Math.floor(Math.random() * 1000000 + 100000)
                            },
                            {
                                n: '客群' + Math.floor(Math.random() * 100 + 1),
                                c: Math.floor(Math.random() * 1000000 + 100000)
                            }
                        ],
                        time: Math.floor(Math.random() * 7 + 1),
                        update: new Date()
                    })
                }
                return data;
            },
            formatDate (date) {
                const y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            changePage () {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                this.tableData1 = this.mockTableData1();
            }
        },
        mounted: function () {
            const dom = this.$refs["datatable"].$el.parentNode.parentNode;
            this.height = dom.clientHeight - 90;
        }
    }
</script>
